<div id="app" v-cloak>
    <div class="total-list">
        <div class="total">
            <span class="icon" style="background-color: #2c8df2">
                <svg t="1605239338109" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2844" width="48" height="48"><path
                        d="M945.344 1022.912 78.72 1022.912c0 0-108.288-439.04 433.28-439.04C1053.632 583.872 945.344 1022.912 945.344 1022.912L945.344 1022.912z"
                        p-id="2845" fill="#ffffff"></path><path
                        d="M515.776 537.472c-216.64 0-216.64-322.56-216.64-322.56S299.136 0 515.776 0s216.64 214.912 216.64 214.912S732.352 537.472 515.776 537.472L515.776 537.472z"
                        p-id="2846" fill="#ffffff"></path></svg>
            </span>
            <span class="count">{{dataTotal.userAll}}</span>
            <span class="info">用户人数</span>
        </div>
        <div class="total">
            <span class="icon" style="background-color: #e46bbd">
                <svg t="1605239338109" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg"
                     p-id="2844" width="48" height="48">
                    <path d="M945.344 1022.912 78.72 1022.912c0 0-108.288-439.04 433.28-439.04C1053.632 583.872 945.344 1022.912 945.344 1022.912L945.344 1022.912z"
                          p-id="2845" fill="#ffffff"></path>
                    <path d="M515.776 537.472c-216.64 0-216.64-322.56-216.64-322.56S299.136 0 515.776 0s216.64 214.912 216.64 214.912S732.352 537.472 515.776 537.472L515.776 537.472z"
                          p-id="2846" fill="#ffffff"></path></svg>
            </span>
            <span class="count">{{dataTotal.userLine}}</span>
            <span class="info">在线人数</span>
        </div>
        <div class="total">
            <span class="icon" style="background-color: #1cbd6b">
                <svg t="1605509613034" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4787" width="48" height="48"><path
                        d="M274.4 404.7v-4.8c0-19.3 15.5-35.1 34.4-35.1h27.5c18.9 0 34.4 15.8 34.4 35.1v5.1c0 19.4 4.8 21.2 23.7 21.2h239.4c17.5 0 19.2-2.4 19.2-18.6v-7.8c0-19.3 15.5-35.1 34.4-35.1H714c18.9 0 34.4 15.8 34.4 35.1v6.1c0 17.3 5.8 20.2 22.6 20.2h132.1c17.9 0 23-4.9 23-22.4v-39.2c0-38.6-30.9-70.2-68.7-70.2H166.7c-37.8 0-68.7 31.6-68.7 70.2v36.8c0 19.8 5.7 24.8 26.9 24.8h124.8c20 0.1 24.7-2.1 24.7-21.4z m0 0"
                        fill="#ffffff" p-id="4788"></path><path
                        d="M348.5 475.6c0 18.9-11.5 34.4-25.7 34.4s-25.7-15.5-25.7-34.4v-42.2c0-18.9 11.5-34.4 25.7-34.4s25.7 15.5 25.7 34.4v42.2z m0 0M724 477.5c0 18.9-11.5 34.4-25.7 34.4s-25.7-15.5-25.7-34.4v-42.2c0-18.9 11.5-34.4 25.7-34.4 14.1 0 25.7 15.5 25.7 34.4v42.2z m0 0M367.7 257.7c22-59.7 78.5-102.1 144.6-102.1s122.6 42.5 144.6 102.1c0 0 4.7 19.7 31.9 19.7 27.3 0 27.2-19.7 27.2-19.7C692.1 165.7 610 98 512.4 98s-179.7 67.7-203.8 159.7c0 0-1.5 17.2 26.7 17.2s32.4-17.2 32.4-17.2z m0 0"
                        fill="#ffffff" p-id="4789"></path><path
                        d="M904.9 478.8h-133c-18.5 0-23.5 3.2-23.5 18.9v7.5c0 19.3-15.5 35.1-34.4 35.1h-26.2c-18.9 0-34.4-15.8-34.4-35.1v-4.5c0-4.9-0.4-8.7-1.4-11.7-1.9-7.7-7.1-10.1-18.7-10.1H390.7c-11.6 0-16.8 2.4-18.7 10.1-1 3-1.4 6.8-1.4 11.7v4.5c0 19.3-15.5 35.1-34.4 35.1H310c-18.9 0-34.4-15.8-34.4-35.1v-7.5c0-15.7-5-18.9-23.5-18.9h-133c-14.5 0-21.2 5.3-21.2 21v356c0 38.6 30.9 70.2 68.7 70.2h690.5c37.8 0 68.7-31.6 68.7-70.2v-356c0.2-15.7-6.4-21-20.9-21z"
                        fill="#ffffff" p-id="4790"></path></svg>
            </span>
            <span class="count">{{dataTotal.deptAll}}</span>
            <span class="info">部门总数</span>
        </div>
        <div class="total">
            <span class="icon" style="background-color: #ff0000">
                <svg t="1605258499100" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4247" width="48" height="48"><path
                        d="M230.065 736.146L169.78 748.77 61.495 911.958l20.386 20.275 20.386 20.306 164.414-107.588 12.774-59.85 135.22-134.324-49.265-49.017-135.345 134.386z m589.641-614.423c5.666-5.683 14.983-5.683 20.706 0 5.792 5.687 5.792 14.931 0 20.586l-237.217 235.6 36.999 36.767L877.35 179.078c5.788-5.716 15.04-5.716 20.758 0a14.361 14.361 0 0 1 0 20.585L660.895 435.227l33.22 32.961c0.568-0.529 1.136-0.84 1.703-1.439l25.103-24.9v0.035l201.1-199.676c40.15-39.824 40.15-104.364 0-144.163-40.08-39.824-105.137-39.856-145.227 0L576.957 296.376l-26.364 26.213c-0.505 0.592-0.886 1.215-1.387 1.744l33.165 33.02 237.335-235.63zM478.105 312.652c3.396-18.587 4.275-37.545 2.577-56.293-4.216-46.419-24.162-91.716-59.904-127.226C359.3 68.151 269.07 53.375 193.566 84.673L315.574 205.69c18.307 18.278 18.374 47.896-0.066 66.198l-50.904 50.48c-18.31 18.209-48.193 18.272-66.444 0L78.856 203.911c-27.117 73.163-11.262 158.38 47.889 217.11 32.4 32.11 72.74 51.19 114.704 57.725a211.463 211.463 0 0 0 60.032 0.627C428.396 605.483 741.82 916.672 741.82 916.672c47.56 47.14 124.834 47.14 172.341 0 22.964-22.831 35.679-53.162 35.679-85.43 0-32.366-12.715-62.795-35.741-85.626L478.105 312.652z m398.55 566.723c-24.852 24.652-64.936 24.652-89.85 0.064-24.666-24.554-24.666-64.54 0.063-89.094 24.851-24.486 64.935-24.553 89.727 0 24.855 24.554 24.791 64.54 0.06 89.03z"
                        p-id="4248" fill="#ffffff"></path></svg>
            </span>
            <span class="count">{{dataTotal.errorUn}}</span>
            <span class="info">故障未处理</span>
        </div>
        <div class="total">
            <span class="icon" style="background-color: #ff9901">
                <svg t="1605258499100" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4247" width="48" height="48"><path
                        d="M230.065 736.146L169.78 748.77 61.495 911.958l20.386 20.275 20.386 20.306 164.414-107.588 12.774-59.85 135.22-134.324-49.265-49.017-135.345 134.386z m589.641-614.423c5.666-5.683 14.983-5.683 20.706 0 5.792 5.687 5.792 14.931 0 20.586l-237.217 235.6 36.999 36.767L877.35 179.078c5.788-5.716 15.04-5.716 20.758 0a14.361 14.361 0 0 1 0 20.585L660.895 435.227l33.22 32.961c0.568-0.529 1.136-0.84 1.703-1.439l25.103-24.9v0.035l201.1-199.676c40.15-39.824 40.15-104.364 0-144.163-40.08-39.824-105.137-39.856-145.227 0L576.957 296.376l-26.364 26.213c-0.505 0.592-0.886 1.215-1.387 1.744l33.165 33.02 237.335-235.63zM478.105 312.652c3.396-18.587 4.275-37.545 2.577-56.293-4.216-46.419-24.162-91.716-59.904-127.226C359.3 68.151 269.07 53.375 193.566 84.673L315.574 205.69c18.307 18.278 18.374 47.896-0.066 66.198l-50.904 50.48c-18.31 18.209-48.193 18.272-66.444 0L78.856 203.911c-27.117 73.163-11.262 158.38 47.889 217.11 32.4 32.11 72.74 51.19 114.704 57.725a211.463 211.463 0 0 0 60.032 0.627C428.396 605.483 741.82 916.672 741.82 916.672c47.56 47.14 124.834 47.14 172.341 0 22.964-22.831 35.679-53.162 35.679-85.43 0-32.366-12.715-62.795-35.741-85.626L478.105 312.652z m398.55 566.723c-24.852 24.652-64.936 24.652-89.85 0.064-24.666-24.554-24.666-64.54 0.063-89.094 24.851-24.486 64.935-24.553 89.727 0 24.855 24.554 24.791 64.54 0.06 89.03z"
                        p-id="4248" fill="#ffffff"></path></svg>
            </span>
            <span class="count">{{dataTotal.errorAll}}</span>
            <span class="info">故障总数</span>
        </div>
    </div>
    <div>
        <div id="LoginChart" class="chart" style="width: 500px;height: 300px"></div>

        <div id="ErrorChart" class="chart" style="width: 500px;height: 300px"></div>

        <div id="TokenTaskChart" class="chart" style="width: 1020px;height: 300px"></div>
    </div>
</div>
<style>
    #app {
        padding: 20px;
        height: 100%;
    }

    .total {
        display: inline-block;
        width: 180px;
        margin-right: 27px;
        height: 80px;
        background: #ffffff;
        box-shadow: 0 0 6px -3px;
        border-radius: 4px;
        position: relative;
    }

    .total > .icon {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 110px;
        bottom: 0;
        background: #2c8df2;
        border-top-left-radius: 4px;
        border-bottom-left-radius: 4px;
        padding-top: 16px;
        padding-left: 11px;
    }

    .total > .count {
        display: block;
        right: 0;
        top: 0;
        left: 70px;
        bottom: 20px;
        color: #2a2a2a;
        position: absolute;
        line-height: 60px;
        text-align: center;
        font-weight: bold;
        font-size: 20px;
    }

    .total > .info {
        display: block;
        top: 60px;
        left: 70px;
        right: 0;
        bottom: 0;
        position: absolute;
        text-align: center;
    }

    .chart {
        margin-top: 20px;
        margin-right: 20px;
        box-shadow: 0 0 6px -3px;
        border-radius: 4px;
        display: inline-block;
        vertical-align: top;
    }
</style>
<script>
    var app = new Vue({
        mixins: [mixinForMgr],
        el: "#app",
        data: {
            dataTotal: {}
        },
        methods: {
            initTotalCount: function () {
                new Ajax("wsys", "data", "total").post({}, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        this.dataTotal = response.dataTotal;
                    }
                }.bind(this))
            },
            initLoginChart: function () {
                var loginChart = echarts.init(document.getElementById('LoginChart'));
                new Ajax("wsys", "data", "login").post({
                    "days": 7,
                    "today": false,
                    "format": "MM月dd日"
                }, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        var date = [];
                        var data = [];
                        for (var i = 0; i < response.result.length; i++) {
                            var obj = response.result[i];
                            date.push(obj.date)
                            data.push(obj.count)
                        }

                        var option = {
                            title: {
                                text: '周登录情况',
                                subtext: '折线图',
                                textStyle: {
                                    color: '#515151',
                                    fontSize: 14
                                },
                                top: '10px',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                name: '日期',
                                axisTick: false,
                                axisLabel: {
                                    interval: 0,
                                    fontSize: 11
                                },
                                boundaryGap: false,
                                data: date
                            },
                            yAxis: {
                                type: 'value',
                                name: '登录/次',
                                axisTick: false,
                                axisLabel: {
                                    interval: 0
                                },
                            },
                            series: [{
                                data: data,
                                type: 'line',
                                itemStyle: {
                                    color: '#515151'
                                },
                                lineStyle: {
                                    color: "#515151",
                                    type: 'dashed',
                                    width: 1
                                },
                                label: {
                                    show: true,
                                    color: '#2c8aff',
                                    position: 'top'
                                }
                            }]
                        };
                        loginChart.setOption(option);
                    }
                }.bind(this));
            },
            initErrorChart: function () {
                var loginChart = echarts.init(document.getElementById('ErrorChart'));
                new Ajax("wsys", "data", "error").post({
                    "days": 7,
                    "today": false,
                    "format": "MM月dd日"
                }, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        var date = [];
                        var data = [];
                        for (var i = 0; i < response.result.length; i++) {
                            var obj = response.result[i];
                            date.push(obj.date)
                            data.push(obj.count)
                        }
                        var option = {
                            title: {
                                text: '周故障情况',
                                subtext: '折线图',
                                textStyle: {
                                    color: '#515151',
                                    fontSize: 14
                                },
                                top: '10px',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            xAxis: {
                                type: 'category',
                                name: '日期',
                                axisTick: false,
                                axisLabel: {
                                    interval: 0,
                                    fontSize: 11
                                },
                                boundaryGap: false,
                                data: date
                            },
                            yAxis: {
                                type: 'value',
                                name: '故障/次',
                                axisTick: false,
                                axisLabel: {
                                    interval: 0
                                },
                            },
                            series: [{
                                data: data,
                                type: 'line',
                                itemStyle: {
                                    color: '#ff0000'
                                },
                                lineStyle: {
                                    color: "#ff0000",
                                    type: 'solid',
                                    width: 1
                                },
                                label: {
                                    show: true,
                                    color: '#ff0000',
                                    position: 'top'
                                }
                            }]
                        };
                        loginChart.setOption(option);
                    }
                }.bind(this));
            },
            initTaskChart: function () {
                var chart = echarts.init(document.getElementById('TokenTaskChart'));
                new Ajax("wsys", "data", "task").post({}, function (response) {
                    if (response.errors.length > 0) {
                        nav.e(response.errors[0].message);
                    } else {
                        var date = [];
                        var data = [];
                        for (var i = 0; i < response.result.length; i++) {
                            var obj = response.result[i];
                            date.push(obj.date)
                            data.push(obj.count)
                        }

                        var option = {
                            title: {
                                text: '任务执行情况',
                                subtext: '最近100次执行情况',
                                textStyle: {
                                    color: '#515151',
                                    fontSize: 14
                                },
                                top: '10px',
                                left: 'center'
                            },
                            grid: {
                                left: '50px',
                                right: '50px',
                                top: '30%',
                                bottom: '5%',
                                containLabel: true
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                axisLabel: {
                                    show: false
                                }
                            },
                            yAxis: {
                                name: '时间(ms)',
                                type: 'value',
                                axisTick: false
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross'
                                }
                            },
                            series: [{
                                name: '执行时间(ms)',
                                type: 'line',
                                smooth: true,
                                itemStyle: {
                                    color: '#2c8df2',
                                },
                                tooltip: {
                                    trigger: 'item',
                                    axisPointer: {
                                        type: 'cross'
                                    }
                                },
                                data: data
                            }, {
                                name: '任务',
                                type: 'pie',
                                z: 100,
                                radius: '40%',
                                center: ['85%', '40%'],
                                itemStyle: {
                                    opacity: 0.7
                                },
                                label: {
                                    formatter: '{b}:{d}%'
                                },
                                tooltip: {
                                    trigger: 'item',
                                    formatter: '{b}:{d}%'
                                },
                                data: [{
                                    value: response.countSuceess,
                                    name: '成功率',
                                    itemStyle: {
                                        color: '#2c8df2'
                                    },
                                    label: {}
                                }, {
                                    value: response.countFailed,
                                    name: '失败率',
                                    itemStyle: {
                                        color: '#ff0000'
                                    },
                                }]
                            }]
                        };
                        chart.setOption(option);
                    }
                }.bind(this))
            }
        },
        created: function () {
        },
        mounted: function () {
            this.initTotalCount();
            this.initLoginChart();
            this.initErrorChart();
            this.initTaskChart();
        },
        watch: {}
    })
</script>
